<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="100px"
        class="demo-ruleForm"
        v-if="isShowForm"
      >
        <div class="secondaryTitle secondaryTitleTheme mrB18">巡查类型</div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="巡查类型：" label-width="135px">
                    <el-radio-group
                      v-model="formData.type"
                      @change="selectChange('xc')"
                    >
                      <template v-for="(item, index) in radioArr">
                        <el-radio :key="index" :label="item.id">{{
                          item.text
                        }}</el-radio>
                      </template>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
          创建模式
        </div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="单位类型：" label-width="135px">
                    <el-radio-group
                      v-model="formData.fieldType"
                      @change="selectChange('dw')"
                    >
                      <template v-for="(item, index) in domainArr">
                        <el-radio :key="index" :label="item.id">{{
                          item.text
                        }}</el-radio>
                      </template>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="任务模式：" label-width="135px">
                    <el-radio-group
                      v-model="formData.jobMothed"
                      @change="selectGetConfigureNum"
                    >
                      <template v-for="(item, index) in taskModeArr">
                        <el-radio :key="index" :label="item.id">{{
                          item.text
                        }}</el-radio>
                      </template>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
          巡查模板配置
        </div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    prop="templateId"
                    label="巡查模板："
                    label-width="135px"
                  >
                    <el-select
                      clearable
                      filterable
                      placeholder="请选择巡查模板"
                      class="proInputWidth mWidth"
                      v-model="formData.templateId"
                      :popper-append-to-body="false"
                    >
                      <el-option
                        v-for="item in patrolTempArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div v-if="formData.jobMothed == 'MANUAL'">
          <el-divider></el-divider>
          <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
            巡查{{ formData.fieldType == 'NC' ? '企业' : '项目' }}配置
          </div>
          <el-row>
            <div style="padding-left: 24px">
              <div style="margin-bottom: 24px">
                <el-button
                  class="commonBut saveBtn funComBut bzjAddJc"
                  icon="icon iconfont icontianjia"
                  @click="goAddProject"
                >
                  <span class="opetareText">{{
                    formData.fieldType == 'NC' ? '添加企业' : '添加项目'
                  }}</span>
                </el-button>
              </div>
              <el-table
                :data="proList"
                v-loading="loading"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                style="border: 1px solid #dfe6ec"
                max-height="300"
              >
                <el-table-column
                  type="index"
                  width="80"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  prop="companyName"
                  label="企业名称"
                  min-width="150"
                  v-if="formData.fieldType == 'NC'"
                  :key="1"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="projectName"
                  label="项目名称"
                  min-width="150"
                  v-if="formData.fieldType == 'CS'"
                  :key="2"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="areaName"
                  label="区域"
                  align="center"
                  min-width="100"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="industryName"
                  label="行业"
                  min-width="170"
                  align="center"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="investmentDesc"
                  label="投资类型"
                  min-width="170"
                  align="center"
                  v-if="formData.fieldType == 'CS'"
                  :key="3"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  prop="statusDesc"
                  label="状态"
                  align="center"
                  v-if="formData.fieldType == 'CS'"
                  :key="6"
                  :formatter="formatTd"
                ></el-table-column>
                <!-- <el-table-column prop="peopleTotal" label="单位评级" align="center" min-width = "120" v-if = "formData.fieldType == 'NC'" :key="4"></el-table-column> -->
                <el-table-column
                  prop="gradeLevel"
                  label="项目评级"
                  align="center"
                  min-width="120"
                  v-if="formData.fieldType == 'CS'"
                  :key="5"
                  :formatter="formatTd"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  prop="hasFile"
                  min-width="110"
                  align="left"
                >
                  <template slot-scope="scope">
                    <p>
                      <el-link type="primary" @click="del(scope.$index)"
                        >删除</el-link
                      >
                    </p>
                  </template>
                </el-table-column>
                <!-- 表格数据为空时，页面显示 -->
                <div slot="empty" v-if="isShow">
                  <emptyTable :emptyText="暂无相关数据"></emptyTable>
                </div>
              </el-table>
            </div>
          </el-row>
        </div>
        <div v-if="formData.jobMothed == 'RANDOM'">
          <el-divider></el-divider>
          <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
            随机{{ formData.fieldType == 'CS' ? '项目' : '企业' }}配置
            <span style="color: red"
              >（已配置{{ configureNum }}个{{
                formData.fieldType == 'CS' ? '项目' : '企业'
              }}）</span
            >
          </div>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      :label="
                        formData.fieldType == 'CS' ? '项目区域：' : '企业区域：'
                      "
                      label-width="135px"
                    >
                      <el-cascader
                        v-model="area"
                        :options="areasOptions"
                        @change="getAreaId('')"
                        clearable
                        filterable
                        placeholder="请选择"
                        :props="{ checkStrictly: true }"
                        class="proInputWidth"
                        :append-to-body="false"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属行业：" label-width="135px">
                      <el-select
                        clearable
                        filterable
                        multiple
                        placeholder="请选择(可多选)"
                        class="proInputWidth"
                        v-model="industryId"
                        v-if="formData.fieldType == 'CS'"
                        @change="getConfigureNum"
                        :popper-append-to-body="false"
                      >
                        <el-option
                          v-for="item in industryOptions"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        >
                        </el-option>
                      </el-select>
                      <el-cascader
                        ref="industry"
                        v-model="industryId"
                        :options="industryOptionsNC"
                        @change="ncGetConfigureNum"
                        :props="propsArr"
                        filterable
                        placeholder="请选择(可多选)"
                        collapse-tags
                        class="searchInputWidth proInputWidth"
                        :append-to-body="false"
                        v-else
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12" v-if="formData.fieldType == 'CS'">
                    <el-form-item label="投资类型：" label-width="135px">
                      <el-select
                        clearable
                        filterable
                        multiple
                        placeholder="请选择(可多选)"
                        class="proInputWidth"
                        v-model="investment"
                        @change="getConfigureNum"
                        :popper-append-to-body="false"
                      >
                        <el-option
                          v-for="item in investmentOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="formData.fieldType == 'CS'">
                    <el-form-item label="项目评级：" label-width="135px">
                      <el-select
                        clearable
                        filterable
                        multiple
                        placeholder="请选择(可多选)"
                        class="proInputWidth"
                        v-model="gradeLevel"
                        @change="getConfigureNum"
                        :popper-append-to-body="false"
                      >
                        <el-option
                          v-for="item in proGradeArr"
                          :key="item.gradeLevel"
                          :label="item.name"
                          :value="item.gradeLevel"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="formData.fieldType == 'NC'">
                    <el-form-item
                      prop="jobTotal"
                      label="任务企业数："
                      label-width="135px"
                    >
                      <el-input
                        v-model.trim="formData.jobTotal"
                        placeholder="请输入任务企业数量"
                        class="proInputWidth"
                        clearable
                        @blur="formData.jobTotal = changeValue($event)"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="formData.fieldType == 'CS'">
                  <el-col :span="12">
                    <el-form-item label="状态：" label-width="135px">
                      <el-select
                        v-model="formData.status"
                        filterable
                        placeholder="请选择"
                        clearable
                        class="proInputWidth"
                        @change="getConfigureNum"
                        :popper-append-to-body="false"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      prop="jobTotal"
                      label="任务项目数："
                      label-width="135px"
                    >
                      <el-input
                        v-model.trim="formData.jobTotal"
                        placeholder="请输入任务项目数量"
                        class="proInputWidth"
                        clearable
                        @blur="formData.jobTotal = changeValue($event)"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
            随机人员配置
            <span style="color: red">已配置{{ configurePerNum }}人</span>
          </div>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属区域：" label-width="135px">
                      <el-cascader
                        v-model="userAreaId"
                        :options="areasOptions"
                        @change="getAreaId('ss')"
                        clearable
                        filterable
                        placeholder="请选择"
                        :props="{ checkStrictly: true }"
                        class="proInputWidth"
                        :append-to-body="false"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      prop="jobUserTotal"
                      label="单任务执行人数："
                      label-width="135px"
                    >
                      <el-input
                        v-model.trim="formData.jobUserTotal"
                        placeholder="请输入单个任务执行人数"
                        class="proInputWidth"
                        clearable
                        @blur="formData.jobUserTotal = changeValue($event)"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row class="btnBox">
          <el-button
            size="medium"
            class="saveBtn submitBtn"
            @click="toGenerate('artificial')"
            v-if="formData.jobMothed == 'MANUAL'"
            :loading="nextLoading"
            v-hasBtn="'patrolTaskList:add'"
            >下一步</el-button
          >
          <el-button
            size="medium"
            class="saveBtn submitBtn"
            @click="toGenerate('random')"
            v-else
            :loading="nextLoading"
            v-hasBtn="'patrolTaskList:add'"
            >随机生成</el-button
          >
          <el-button size="medium" class="cancelBtn cancelSty" @click="goBack()"
            >取消</el-button
          >
        </el-row>
      </el-form>
    </div>
    <addProject
      v-if="isShowAddProject"
      @closeDialog="hiddenDialog"
      :isFjOrJs="formData.fieldType"
      :proList="proList"
      @changeData="getProList"
    ></addProject>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import addProject from '@/components/inspectionTask/addProject'

export default {
  name: 'addInspectionTask',
  components: {
    addProject,
  },
  data() {
    // 验证项目、企业数
    var validTaskNum = (rule, value, callback) => {
      var name
      if (this.formData.fieldType == 'CS') {
        name = '项目'
      } else {
        name = '企业'
      }
      if (value === '') {
        callback(new Error('任务' + name + '数不能为空'))
      } else {
        var ConCycle = /^\+?[1-9]\d*$/
        if (!ConCycle.test(value)) {
          callback(new Error('任务' + name + '数必须是正整数'))
        } else {
          if (value > this.configureNum || value > 30) {
            callback(
              new Error(
                '任务' +
                  name +
                  '数不能超过已配置' +
                  name +
                  '总数,且最大不超过30个'
              )
            )
          } else {
            callback()
          }
        }
      }
    }
    var validImplementNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('单任务执行人数不能为空'))
      } else {
        var ConCycle = /^\+?[1-9]\d*$/
        if (!ConCycle.test(value)) {
          callback(new Error('单任务执行人数必须是正整数'))
        } else {
          if (value > this.configurePerNum || value > 20) {
            callback(
              new Error('单任务执行人数超过已配置人员总数,且最大不超过20个')
            )
          } else {
            callback()
          }
        }
      }
    }
    return {
      titleText: '创建巡查任务',
      back: true,
      formData: {
        type: 'DAILY',
        jobMothed: 'MANUAL',
        fieldType: 'CS',
        templateId: '',
        industryId: [],
        investment: [],
        gradeLevel: [],
        jobTotal: '',
        jobUserTotal: '',
        userAreaId: '',
        areaId: '',
        status: '',
      },
      industryId: [],
      investment: [],
      gradeLevel: [],
      typeId: [
        {
          code: '1',
          name: '类型',
        },
        {
          code: '2',
          name: '类型',
        },
      ],
      patrolTempArr: [],
      areaIdOpt: [],
      area: '',
      userAreaId: '',
      investmentTypeOptions: [],
      proGradeArr: [
        //     {
        //     code:"A",name:"A"
        // },{
        //     code:"B",name:"B"
        // },{
        //     code:"C",name:"C"
        // },
        // {
        //     code:"D",name:"D"
        // },
      ],
      proList: [], //添加企业、项目数据
      isShow: false, //列表加载
      isShowAddProject: false, //添加企业、项目弹框
      newProList: [],
      radioArr: [], //巡查类型数组
      domainArr: [],
      taskModeArr: [],
      ncIndustryOptions: [], //非建行业
      configureNum: '',
      configurePerNum: '',
      formRules: {
        jobTotal: [
          { required: true, validator: validTaskNum, trigger: 'blur' },
        ],
        jobUserTotal: [
          { required: true, validator: validImplementNum, trigger: 'blur' },
        ],
        templateId: [
          { required: true, message: '巡查模板不能为空', trigger: 'change' },
        ],
      },
      isShowForm: true,
      nextLoading: false, //下一步loading
      propsArr: { multiple: true },
    }
  },
  watch: {},
  computed: {
    ...mapState([
      'areasOptions',
      'industryOptions',
      'industryOptionsNC',
      'statusOptions',
      'investmentOptions',
    ]),
  },
  created() {
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    //获取行业
    this.getIndustry({})
    this.getIndustrySelect()
    this.getTypeList()
    this.getLevelList('20') //项目评级配置
    this.getCXInfo('ipqcType') //获取巡查类型
    this.getCXInfo('ipqcMothed') //获取创建模式
    this.getCXInfo('ipqcUnitType') //获取单位
    this.getStatus({})
  },
  mounted() {},
  methods: {
    ...mapActions(['getAreas', 'getIndustry', 'getStatus']),
    // 获取巡查类型/创建模式/获取单位
    getCXInfo(type) {
      this.axios({
        method: 'post',
        url: 'api-gov/ipqcjob/expand/findenumbytype',
        data: { type: type },
      }).then((res) => {
        if (!res.data.hasError) {
          if (type == 'ipqcType') {
            this.radioArr = res.data.result
            // this.getPatrolTemp()
          } else if (type == 'ipqcMothed') {
            this.taskModeArr = res.data.result
          } else {
            this.domainArr = res.data.result
            this.getPatrolTemp()
          }
        }
      })
    },
    //获取巡查模板
    getPatrolTemp() {
      this.axios({
        method: 'post',
        url: 'api-gov/ipqc/template/expand/listbytype',
        data: {
          inspectionType: this.formData.type,
          type: this.formData.fieldType,
        },
      }).then((res) => {
        if (!res.data.hasError) {
          this.patrolTempArr = res.data.result
          if (this.patrolTempArr.length == 0) {
            this.$message({
              message: '当前巡查类型中未创建巡查模板，无法进行任务创建',
              type: 'warning',
            })
          }
        }
      })
    },
    //获取选中的区域最后一级id
    getAreaId(type) {
      if (type == '') {
        this.formData.areaId = this.area[this.area.length - 1]
        if (this.formData.fieldType == 'CS') {
          this.getConfigureNum()
        } else {
          this.ncGetConfigureNum()
        }
      } else {
        this.formData.userAreaId = this.userAreaId[this.userAreaId.length - 1]
        this.getPersonNum()
      }
    },
    getTypeList() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findstatusbytype',
        data: { type: 'PROJECT_INVESTMENT' },
      }).then((res) => {
        if (!res.data.hasError) {
          // res.data.result.unshift({ code: "", name: "全部" });
          this.investmentTypeOptions = res.data.result
        }
      })
    },
    toGenerate(type) {
      var message
      if (this.formData.jobMothed == 'MANUAL') {
        if (this.formData.fieldType == 'CS') {
          message = '请先配置任务项目'
        } else {
          message = '请先配置任务企业'
        }
        if (this.proList.length == 0) {
          this.$message({
            message: message,
            type: 'warning',
          })
          return
        }
        if (this.proList.length > 30) {
          this.$message({
            message: '企业列表最多配置30条',
            type: 'warning',
          })
          return
        }
      }
      this.nextLoading = true

      this.$refs['formData'].validate((valid) => {
        if (valid) {
          // 下一步、随机
          this.goNextStep(type)
        } else {
          this.nextLoading = false
          return false
        }
      })
    },
    goNextStep(type) {
      if (this.formData.jobMothed == 'RANDOM') {
        this.formData.industryId = this.industryId.join(',')
        this.formData.investment = this.investment.join(',')
        this.formData.gradeLevel = this.gradeLevel.join(',')
        this.formData.dataListStr = []
      } else {
        this.formData.dataListStr = this.packageParams(this.proList)
        this.formData.industryId = []
        this.formData.investment = []
        this.formData.gradeLevel = []
        this.formData.jobTotal = ''
        this.formData.jobUserTotal = ''
        this.formData.userAreaId = ''
        this.formData.areaId = ''
        this.formData.status = ''
      }
      this.axios({
        method: 'post',
        url: 'api-gov/ipqcjobtemp/expand/savetemp',
        data: this.formData,
      })
        .then(
          (response) => {
            this.nextLoading = false
            if (!response.data.hasError) {
              this.$router.push({
                path: '/home/inspectionTask/inspectionTaskResult',
                name: 'inspectionTaskResult',
                query: {
                  type: type,
                  formData: this.packageParams(this.formData),
                },
              })
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/patrol/patrolTaskList',
                newUrl: this.$router.currentRoute.fullPath,
              })
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
              this.nextLoading = false
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    goBack() {
      this.$router.push({
        path: '/home/patrol/patrolTaskList',
        name: 'patrolTaskList',
        query: {
          activeName: 'second',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/patrol/patrolTaskList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 添加企业、项目弹框
    goAddProject() {
      this.isShowAddProject = true
    },
    hiddenDialog() {
      this.isShowAddProject = false
    },
    // 获取子组件选中的企业
    getProList(data) {
      this.proList = data
    },
    selectChange(type) {
      this.proList = []
      this.isShowForm = false
      this.$nextTick(() => {
        this.isShowForm = true
      })
      this.formData.templateId = ''
      this.industryId = []
      this.getPatrolTemp()
      if (type == 'dw') {
        if (this.formData.jobMothed == 'RANDOM') {
          if (this.formData.fieldType == 'CS') {
            this.getConfigureNum()
          } else {
            this.ncGetConfigureNum()
          }
          this.getPersonNum()
        }
      }
    },
    // 非建行业筛选
    getIndustrySelect() {
      this.axios({
        method: 'post',
        url: 'api-bs/industry/base/firstindustry',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.ncIndustryOptions = response.data.result
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取随机项目配置数
    getConfigureNum() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/prototalbyconditions',
        data: {
          areaId: this.formData.areaId,
          industryId: this.industryId.join(','),
          investment: this.investment.join(','),
          gradeLevel: this.gradeLevel.join(','),
          status: this.formData.status,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.configureNum = response.data.result.total
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 获取随机企业配置数
    ncGetConfigureNum() {
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/comtotalbyconditions',
        data: {
          bizAreaId: this.formData.areaId,
          industryId: this.industryId.join(','),
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.configureNum = response.data.result.total
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    selectGetConfigureNum() {
      this.isShowForm = false
      this.$nextTick(() => {
        this.isShowForm = true
      })
      if (this.formData.jobMothed == 'RANDOM') {
        if (this.formData.fieldType == 'CS') {
          this.getConfigureNum()
        } else {
          this.ncGetConfigureNum()
        }
        this.getPersonNum()
      }
    },
    getPersonNum() {
      this.axios({
        method: 'post',
        url: 'api-u/users/usertotalbyarea',
        data: {
          areaId: this.formData.userAreaId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.configurePerNum = response.data.result.total
            } else {
              this.$message({
                message: '数据获取失败',
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    del(index) {
      this.proList.splice(index, 1)
    },
    getLevelList(type) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditLevel/expand/getCreditLevelList',
        data: {
          type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const results = response.data.result
            results.forEach((v) => {
              v.name = v.gradeLevel
            })
            this.proGradeArr = results
            const otherLevel = { gradeLevel: 'O', name: '其他' }
            this.proGradeArr.push(otherLevel)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    top: 198px;
    padding: 24px;
    .infoTitle {
      font-size: 16px;
      padding: 16px 24px;
      background: #f5f7fb;
      margin-bottom: 24px;
      color: #333;
      font-weight: 700;
    }
    .proInputWidth {
      width: 65%;
    }
    .btnBox {
      text-align: center;
    }
    .cancelSty {
      margin-top: 50px;
      margin-bottom: 30px;
    }
    /deep/.searchInputWidth .el-input__inner,
    .searchInputWidth .el-input--suffix .el-input__inner {
      width: inherit !important;
    }
  }
}
</style>
